<template>
	<view class="content">
		<view class="search" @click="switchSearch">
			 <u-search placeholder="请输入搜索内容"  v-model="keyword"></u-search>
		</view>

		<view class="index-nav">
			<view v-for="(i,ind) in nav" @click="switchNav(ind,i.url)" :key="ind" class="indexnav"
				:class="navindex==ind?'active':''">
				<span>
					{{i.name}}
				</span>
				<span class="border"></span>
			</view>
			<view class="indexnav" @click="switchNavs(4)" :class="navindex==4?'active':''">
				<span>排行</span>
				<span class="border"></span>
			</view>
		</view>

		<view class="index-box" v-if="selectnav==false">
			<view class="banner">
				<swiper circular indicator-dots autoplay indicator-active-color="#FFFFFF">
					<swiper-item v-for="(i,ind) in banner" :key="ind" @click="switchDetail(i.id,i.title)">
						<image :src="i.cover"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="fiction">
				<view class="fiction-item" v-for="(i,ind) in arr" :key="ind">
					<view class="fiction-class">
						{{i.name}}
					</view>
					<view class="fiction-box" v-if="i.list.length>3">
						<view class="fiction-top" @click="switchDetail(i.list[0].id,i.list[0].title)">
							<view class="top-img">
								<image :src="i.list[0].cover" mode=""></image>
								<!-- <img :src="i.list[0].cover" alt=""> -->
							</view>
							<view class="top-content">
								<view class="top-title">
									{{i.list[0].title}}
								</view>
								<view class="top-author">
									{{i.list[0].author}}/{{i.list[0].category}}
								</view>
								<view class="content-text">{{i.list[0].content}}</view>
							</view>
						</view>
						<view class="fiction-bottom">
							<view class="bottom-item" @click="switchDetail(i.list[1].id,i.list[1].title)">
								<view class="bottom-img">
									<!-- <img :src="i.list[1].cover" alt=""> -->
									<image :src="i.list[1].cover" mode=""></image>
								</view>
								<view class="bottom-title">
									{{i.list[1].title}}
								</view>
								<view class="bottom-author">
									{{i.list[1].author}}
								</view>
							</view>
							<view class="bottom-item" @click="switchDetail(i.list[2].id,i.list[2].title)">
								<view class="bottom-img">
									<image :src="i.list[2].cover" @error="error(ind,2)"></image>
									<!-- <img :src="i.list[2].cover" alt="" @error="error(ind,2)"> -->
								</view>
								<view class="bottom-title">
									{{i.list[2].title}}
								</view>
								<view class="bottom-author">
									{{i.list[2].author}}
								</view>
							</view>
							<view class="bottom-item" @click="switchDetail(i.list[3].id,i.list[3].title)">
								<view class="bottom-img">
									<image :src="i.list[3].cover"></image>
									<!-- <img :src="i.list[3].cover" alt=""> -->
								</view>
								<view class="bottom-title">
									{{i.list[3].title}}
								</view>
								<view class="bottom-author">
									{{i.list[3].author}}
								</view>
							</view>
						</view>
					</view>
					<view class="fiction-item-content" v-if="i.list.length<=3" v-for="(item,ind) in i.list" :key="ind"
						@click="switchDetail(item.id,item.title)">
						<view class="fiction-item-img">
							<image :src="item.cover" alt="" mode=""></image>
							<!-- <img :src="item.cover" alt=""> -->
						</view>
						<view class="fiction-item-text">
							<view class="fiction-item-title">
								{{item.title}}
							</view>
							<view class="fiction-item-author">
								{{item.author}}/{{item.category}}
							</view>
							<view class="fiction-item-booktext">
								{{item.content}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="ranking" v-if="selectnav">
			<view class="ranking-nav">
				<view v-for="(i,ind) in rank"  :key="ind" class="ranknav" :class="rankindex==ind?'active':''" @click="switchRank(ind)">
					<span>
						{{i.name}}
					</span>
				</view>
			</view>
			<view class="rank-second">
				<view class="rank-second-item" v-for="(i,ind) in rankresult" :key="ind" :class="ranksecond==ind?'active':''" @click="switchSecond(i.naviInfos
[0].url,ind)" >
					{{i.name}}
				</view>
			</view>
			<view class="rank-item-box" v-if="rankbooklength">
				<view class="rank-item-book"  v-for="(item,ind) in rankbooks" :key="ind" @click="switchDetail(item.id,item.title)">
					<view class="rank-item-img">
						<image :src="item.cover" alt="" mode=""></image>
						<!-- <img :src="item.cover" alt=""> -->
					</view>
					<view class="rank-item-text">
						<view class="rank-item-title">
							{{item.title}}
						</view>
						<view class="rank-item-author">
							{{item.author}}/{{item.category}}
						</view>
						<view class="rank-item-booktext">
							{{item.content}}
						</view>
					</view>
				</view>
			</view>
			<view class="rank-item-box kong" v-if="rankbooklength==false">
				<image src="../../static/kong1.png" mode=""></image>
			</view>
		</view>
	</view>


</template>

<script>
	import {
		getSlideshow,
		getSlideContent,
		getFictionDetail,
		getSectionList,
		getRankingshow,
		getRankingContent
	} from "../../api/index.js"
	export default {
		data() {
			return {
				// nav: [],
				keyword:"",
				nav: [{
						"name": "精选",
						"url": "/store/show.json?type=female_recommend&uuid=b229b022871941fea35edc7aceeed1ab",
						"id": "b229b022871941fea35edc7aceeed1ab",
						"style": 0,
						"select": false
					},
					{
						"name": "免费",
						"url": "/store/show.json?type=female_free&uuid=19ef3f613db44231983a48a570fc0a9a",
						"id": "19ef3f613db44231983a48a570fc0a9a",
						"style": 0,
						"select": false
					},
					{
						"name": "男生",
						"url": "/store/show.json?type=male&uuid=ca03da7b64ca443ab25ec3b662fa91e2",
						"id": "ca03da7b64ca443ab25ec3b662fa91e2",
						"style": 0,
						"select": false
					},
					{
						"name": "女生",
						"url": "/store/show.json?type=femail&uuid=017de2274aa5400e9dabe30f173e98d9",
						"id": "017de2274aa5400e9dabe30f173e98d9",
						"style": 0,
						"select": false
					},
					// {
					// "name": "出版",
					// "url": "/store/show.json?type=publish&uuid=b5648dd3c4f24d9796f590cd81ca076e",
					// "id": "b5648dd3c4f24d9796f590cd81ca076e",
					// "style": 0,
					// "select": false
					// }
				],
				navindex: 0,
				rankindex:0,
				ranksecond:0,
				rankbooks:[],
				rankbooklength:true,
				banner: [],
				arr: [],
				rank:[],
				rankresult:[],
				selectnav:false
			}
		},
		onLoad() {
			// this.getIndexClass()
			this.init()
			getRankingshow().then(res=>{
				this.rank=res.data.list.splice(0,3)
				this.rankresult=this.rank[0].subNavis
				console.log(this.rankresult[0].naviInfos[0].url);
				getRankingContent(this.rankresult[0].naviInfos[0].url).then(res=>{
					this.rankbooks=res.list
					console.log(res.list);
				})
			})
		},
		methods: {
			switchSecond(url,ind){
				console.log(url);
				this.ranksecond=ind
				getRankingContent(url).then(res=>{
					if(res.list.length!=0){
						this.rankbooks=res.list
						this.rankbooklength=true
					}else{
						this.rankbooklength=false
					}
					
					console.log(res.list);
				})
			},
			switchRank(ind){
				this.rankindex=ind
				this.rankresult=this.rank[ind].subNavis
				this.ranksecond=0
				getRankingContent(this.rankresult[0].naviInfos[0].url).then(res=>{
					this.rankbooks=res.list
					console.log(res.list);
				})
			},
			switchNavs(ind){
				this.navindex=ind
				this.selectnav=true
			},
			switchSearch() {
				uni.navigateTo({
					url: "../mysearch/mysearch"
				})
			},
			error(ind, num) {
				this.arr[ind].list[num].cover = "../../static/kongimg.jpg"
			},
			switchDetail(id, title) {
				uni.navigateTo({
					url: `../detail/detail?id=${id}&title=${title}`
				})
			},
			// async getIndexClass() {
			// 	await getSlideshow().then(content => {
			// 		uni.showLoading({
			// 			title: '正在加载...',
			// 		});
			// 		console.log(content.data);
			// 		let {
			// 			data
			// 		} = content
			// 		this.nav = data.navi
			// 		this.nav.splice(4, 2)
			// 		uni.hideLoading();
			// 	})
			// },
			async switchNav(ind, myurl) {
				this.selectnav=false
				uni.showLoading({
					title: '正在加载...',
				});
				this.navindex = ind
				await getSlideContent(myurl).then(content => {
					// console.log(content);
					let {
						data
					} = content
					this.banner = data.list[0].banners
					// console.log(data);
					this.arr = data.list.slice(1)
					this.arr = this.arr.filter(item => {
						return item.name
					})
					// console.log(this.arr);
					uni.hideLoading();
				})
			},
			async init() {
				await getSlideContent("/store/show.json?type=female_recommend&uuid=b229b022871941fea35edc7aceeed1ab")
					.then(content => {
						uni.showLoading({
							title: '正在加载...',
						});
						// console.log(content);
						let {
							data
						} = content
						this.banner = data.list[0].banners
						// console.log(content,data);
						this.arr = data.list.slice(1)
						console.log(this.arr);
						this.arr = this.arr.filter(item => {
							return item.name
						})
						// console.log(this.arr);
						uni.hideLoading();
					})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;

		.ranking{
			padding: 0 24rpx;
			margin-top: 30rpx;
			.ranking-nav{
				display: flex;
			}
			.ranknav{
				height: 30px;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				border-bottom:1px solid  transparent;
				padding-bottom: 20rpx;
				&.active{
					color: #f9834a;
					border-color: #f9834a;
				}
			}
			.rank-second{
				margin-top: 30rpx;
				display: flex;
				.rank-second-item{
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1px solid #f9834a;
					border-radius: 12px;
					margin: 0 3px;
					padding: 3px;
					color: #999;
					&.active{
						background-color: #f9834a;
						color: white;
					}
				}
			}
			.rank-item-box{
				&.kong{
					transform: translateY(30%);
					display: flex;
					justify-content: center;
				}
			} 
			.rank-item-book{
				display: flex;
				box-sizing: border-box;
				margin: 30rpx 0;
				
				.rank-item-img {
					width: 200rpx;
					height: 260rpx;
				
					image {
						width: 200rpx;
						height: 260rpx;
					}
				}
				
				.rank-item-text {
					flex: 1;
					box-sizing: border-box;
					padding: 0 10px;
					box-sizing: border-box;
				}
				
				.rank-item-title {
					font-weight: bold;
				}
				
				.rank-item-author {
					color: #878787;
					font-size: 14px;
					margin: 10px 0;
				}
				
				.rank-item-booktext {
					width: 462rpx;
					font-size: 13px;
					line-height: 20px;
					display: -webkit-box;
					overflow: hidden;
					-webkit-box-orient: vertical;
					line-clamp: 2;
					-webkit-line-clamp: 2;
				}
			}
		}
		.search {
			display: flex;
			justify-content: center;
			margin: 20rpx 0;
			height: 60rpx;
			padding: 0 20rpx;
			input {
				border-radius: 64rpx;
				width: 90%;
				padding-left: 20rpx;
				height: 60rpx;
			}
		}

		.index-nav {
			width: 100%;
			display: flex;
			justify-content: space-around;
			color: #878787;
		}

		.indexnav {
			width: 90rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
		}

		.indexnav.active {
			font-weight: bold;
			color: #f9834a;
			font-size: 36rpx;
			box-sizing: border-box;

		}

		.indexnav.active span.border {
			display: block;
			width: 36rpx;
			height: 1px;
			border-radius: 64rpx;
			border-bottom: 3px solid #f9834a;
		}

		.banner {
			margin-top: 24rpx;
			box-sizing: border-box;

		}

		.fiction {
			box-sizing: border-box;
			padding: 0 25rpx;

			.fiction-item {
				margin: 30rpx 0;
			}

			.fiction-class {
				font-size: 36rpx;
				font-weight: bold;
			}

			.fiction-box {
				.fiction-top {
					box-sizing: border-box;
					margin: 10px 0;
					display: flex;

					.top-img {
						width: 220rpx;
						height: 280rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.top-content {
						flex: 1;
						box-sizing: border-box;
						padding: 0 10px;

						.content-text {
							font-size: 26rpx;
							line-height: 40rpx;
							display: -webkit-box;
							overflow: hidden;
							-webkit-box-orient: vertical;
							line-clamp: 3;
							-webkit-line-clamp: 3;
						}

						.top-title {
							font-weight: bold;
						}

						.top-author {
							color: #878787;
							font-size: 28rpx;
							margin: 20rpx 0;
						}

					}

				}

				.fiction-bottom {
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;
					padding-bottom: 30rpx;
					border-bottom: 1px solid #ebebeb;
					margin-top: 40rpx;
				}

				.bottom-item {
					box-sizing: border-box;
					width: 32%;

					.bottom-img {
						width: 100%;
						height: 260rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.bottom-title {
						font-size: 26rpx;
						margin: 3px 0;
						display: -webkit-box;
						overflow: hidden;
						-webkit-box-orient: vertical;
						line-clamp: 2;
						-webkit-line-clamp: 2;
					}

					.bottom-author {
						font-size: 24rpx;
						color: #999;
					}
				}
			}

			.fiction-item:last-child .fiction-item-content {
				border-bottom: none;
			}

			.fiction-item-content:last-child {
				box-sizing: border-box;
				padding-bottom: 30rpx;
				border-bottom: 1px solid #ebebeb;
			}

			.fiction-item-content {
				display: flex;
				box-sizing: border-box;
				margin: 10px 0;

				.fiction-item-img {
					width: 200rpx;
					height: 260rpx;

					image {
						width: 200rpx;
						height: 260rpx;
					}
				}

				.fiction-item-text {
					flex: 1;
					box-sizing: border-box;
					padding: 0 10px;
					box-sizing: border-box;
				}

				.fiction-item-title {
					font-weight: bold;
				}

				.fiction-item-author {
					color: #878787;
					font-size: 14px;
					margin: 10px 0;
				}

				.fiction-item-booktext {
					font-size: 13px;
					line-height: 20px;
					display: -webkit-box;
					overflow: hidden;
					-webkit-box-orient: vertical;
					line-clamp: 2;
					-webkit-line-clamp: 2;
				}
			}
		}


	}

	swiper {
		width: 94%;
		height: 320rpx;
		margin: 0 auto;

		image {
			border-radius: 8px;
			width: 100%;
			height: 100%;
		}
	}
</style>